<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Game that explode your mind</title>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:700italic&amp;subset=latin,cyrillic-ext,cyrillic">
    <link rel="stylesheet" type="text/css" href="css/style.min.css" >

    <style id="live_css"></style>
    <style>
      #login, #rooms, #main,
      #help, #about, #error {
          display: none;
      }
    </style>
  </head>
  <body>
    <div id="logo">
      Durak <span>online</span>
    </div>

    <div id="menu"></div>

    <div id="help">
      Some words about project.
    </div>
    <div id="about">
      Some words about me.
    </div>

    <div id="error">
      This is an HTML5 experiment. We're sorry, but your browser does not support HTML5.
    </div>

    <div id="loading">
      <div class="label">Loading...</div><div></div>
      <div class="progress progress-striped active">
        <div class="bar" style="width: 100%;"></div>
      </div>
    </div>

    <div id="login">
      <div id="ln_title" class="title">Do you want to join the game?</div>
      <div class="form-row rnick">
        <div id="lnnk_lable" class="lable">Your nickname:</div>
        <input type="text" name="nick" id="inp_nick"/>
      </div>
      <div class="form-row remail">
        <div id="lnel_lable" class="lable">E-mail:</div>
        <input type="text" name="email" id="inp_email"/>
        <button id="lnel_button">Restore</button>
      </div>
      <div class="form-row rpassw">
        <div id="lnpw_lable" class="lable">Password:</div>
        <input type="password" name="passw" id="inp_passw"/>
        <button id="lnpw_button">Play</button>
      </div>
      <div class="form-row rretype">
        <div id="lnre_lable" class="lable">Retype:</div>
        <input type="password" name="retype" id="inp_retype"/>
        <button id="lnre_button">Register</button>
        <button id="lnrs_button">Restore</button>
      </div>
      <div class="form-row restore">
        <div id="lnre_lable" class="lable"></div>
        <a>Forgot password?</a>
      </div>
      <div class="form-row back">
        <div id="lnre_lable" class="lable"></div>
        <a>Back to login&nbsp;</a>
      </div>
      <div class="form-row status">
        <div class="error err1">Use only english characters, digits and - _ symbols</div>
        <div class="error err2">Nickname must include at least one alphabetical character</div>
        <div class="error err3">Nickname must contain 4 or more characters</div>
        <div class="error err4">Wrong password, please try again</div>
        <div class="error err5">Passwords do not match</div>
        <div class="error err6">Use at least 6 symbols in password.</div>
        <div class="error err7">Please type your real email</div>
        <div class="error err8">No matches found</div>
        <div class="error err9">Account with this email is already exists.</div>
        <div class="error err10">Wrong password.</div>
        <div class="warning warn1">Looking for a nickname...</div>
        <div class="warning warn2">This nickname is already taken.<br>
                                   If you want sign up try another</div>
        <div class="success succ1">You're successfuly registred</div>
        <div class="success succ2">We sent you email with instructions</div>
        <div class="success succ3">Your password changed successfully</div>
      </div>
    </div>

    <div id="rooms">
      <div id="add_room" onclick="room.newRoom()">add room</div>
      <table>
        <thead>
          <tr>
            <th>#
            <th>Name
            <th>Players/Max
            <th>Difficulty
            <th>Remain cards
            <th>Join
        <tbody>
          <tr style='display:none;'>
          <tr>
            <td>Loading...
            <td><td><td><td><td>
      </table>
      <div id="pagination"></div>

    </div>

    <div id="main">

      <div id="deck">
        <div class="card top">
          <div class="count">36</div>
        </div>
        <div class="card empty">♥</div>
      </div>

      <div id="gameplace"></div>

      <div id="right_panel">
        <div id="users"></div>
        <div id="actions"></div>
      </div>

      <div style="clear:both;">&nbsp;</div>

      <div id="buttons"></div>
      <div id="mycards"></div>

    </div>

    <script type="text/javascript" src="allinone.min.js"></script>

  </body>
</html>